<html>
<head>

</head>
<style>
span.dropt {border-bottom: thin dotted; background: #ffeedd;}
span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; }
span.dropt span {position: absolute; left: -9999px;
  margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
  border-style:solid; border-color:black; border-width:1px; z-index: 6;}
span.dropt:hover span {left: 2%; background: #ffffff;} 
span.dropt span {position: absolute; left: -9999px;
  margin: 4px 0 0 0px; padding: 3px 3px 3px 3px; 
  border-style:solid; border-color:black; border-width:1px;}
span.dropt:hover span {margin: 20px 0 0 170px; background: #ffffff; z-index:6;} 







	
		img.bg {
			/* Set rules to fill background */
			min-height: 100%;
			min-width: 1024px;
			
			/* Set up proportionate scaling */
			width: 100%;
			
			
			/* Set up positioning */
			position: fixed;
			top: 0;
			left: 0;
		}
		
		@media screen and (max-width: 1024px){
			img.bg {
				left: 50%;
				margin-left: -512px; }
		}
		
			#content {
			/* This is the only important rule */
			/* We need our content to show up on top of the background */
			position: relative; 
			
			
			/* These have no effect on the functionality */
			/*width: 1000px;*/
			width: 62%;
			margin: 0 auto;
			background: #tranparent;
			padding: 0px;
			font-family: helvetica, arial, sans-serif;
			font-size: 10pt;
			line-height: 16pt;
			/*border:thin solid green;*/
			float:left;
		}
		
		li{ list-style:none;}
		
		/*------------------------*/
		.titreEvenements{}
		.titreMenuBouffe{position: relative;bottom: 30px;}
		.titreReservation{position: relative;bottom: 60px;}
		.titreGauchePub{}
		.soirees{ position: relative;right: 36px;}
		.MenuPdf{position: relative;bottom: 32px;right: 36px;}
		.informationPub{position: relative;bottom: 58px;right: 36px;width: 238px;}
		/*------------------------*/
		
		
		
		
		
			
		.principal{
			position:relative;
			width: 100%;
			/*border: thin solid red;*/
			/*height: 100%;*/
			}
			.pusherLeft{ width:25%;height:100%; border:thin solid transparent;float:left;}/*ne pas supprimer le border transparent*/
			.pusherTop{
				width: 99%;
				margin-top: -16px;
				/*border: thin solid blue;*/
				height: 33%;}
		
		body {
			/* These rules have no effect on the functionality */
			/* They are for styling only */
			margin: 0;
			padding: 0px 0 0 0;
		}
		
	.main {
height: 511px;
color: white;
width: 74%;
background-color: black;
opacity: 0.6;
padding:3%;

/*border: thin solid pink;*/
}
		
		
		.LogoAndList{ 
		float:left;
		background: #000 ;
		height: 218px;
		width: 316px;
		 position: relative;
		/*border:thin solid red;*/}
/*		
.listmenu_2 {
		
right: 51px;
position: relative;
top: 20px;
width: 387px;
line-height: 26px;
font-size: 94%;



}
*/
.listmenu_2 {
position: relative;
width: 25%;
font-size: 94%;
float: right;
}


		.listemenuUl{list-style:none; color:#FFF;} 
		
		.logo {

position:absolute;
left:-15%;
}
/*Attention ces contenue sont pour la section de droite de la page 
microbraserie,le pub,article promos, capsules vidéos ,galerie et nous joindre*/

.contenueHaut{ height:160px; width:100%;/*border:thin red solid;*/}
.contenueGauche{height:278px; width:41%; /* border-right:thin #ccc solid;*/ float:left; overflow:scroll;overflow-x: hidden;}
.contenueDroite{height:280px; width:57%;/*border:thin yellow solid;*/ float:right;margin-bottom:16px; overflow:scroll;overflow-x: hidden;}
.contenueTextDroite{/* float:right;*/width: 100%;position: relative;bottom: 3px;}
.contenueDroiteImage{position: relative;float: left;margin-right: 10px;}/*images des invitées de soirée de contes*/
.invitees{ position:relative;}/*images et textes pour les soirées de contes*/

.borderGray{ border-right:thin solid #ccc;}
		
a:link {color:#fff;text-decoration:none;}
a:visited {color:#fff;text-decoration:none;}
a:active {color:#fff;text-decoration:none;}
a:hover {color:#ccc;text-decoration:none;}

/*Page Article Promos,*/
.articlesPromos{ position:relative;}/*images et textes pour les soirées de contes*/
.ImageDroiteArticlesPromos{position: relative;float: left;margin-right: 10px;}/*images des invitées de soirée de contes*/
.textArticlesPromosDroite{/* float:right;*/width: 100%;position: relative;bottom: 3px;}





/*Formule pour le scroll */
::-webkit-scrollbar {
    width: 2px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 0px;
    border-radius: 0px;
    background: #ccc; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}








</style>
<body>
<div class="main">
<div class="contenueHaut">
<h3>ARTICLES PROMOS</h3>
<p>Vous êtes intéressé par un article ou vous aimeriez recevoir
plus d'infos ?
Communiquez avec nous par téléphone ou courriel au
<a href="#">info@lebilboquet.qc.ca</a> </p>
<br/>

</div><!--/contenueHaut-->
<div class="contenueGauche borderGray">

<ul>
<li class="soirees"><a href="#">&gt;Chandail Bilboquet</a></li>
<li class="soirees"><a href="#">&gt;Chandail Corriveau Femme</a></li>
<li class="soirees"><a href="#">&gt;Chandail Corriveau Homme</a></li>
<li class="soirees"><a href="#">&gt;Casquette</a></li>
<li class="soirees"><a href="#">&gt;Tuque</a></li>
</ul>





</div><!--/contenueGauche-->

<div class="contenueDroite">

  <div class="articlesPromos">
	<div class="ImageDroiteArticlesPromos"><img src="images/product/article1.jpg" /></div><!--ImageDroiteArticlesPromos-->

	<div class="textArticlesPromosDroite"><p>Chandail Bilboquet<br/>HOMME<br/>Grandeurs disponibles:<br/>
M, L, XL et XXL <br/>20 $ tx incluses</p></div><!--/textArticlesPromosDroite-->
    </div><!--articlesPromos-->
    
    

  
    
    

</div><!--/contenueDroite-->







</div><!--main-->





<span class="dropt" title="Title for the pop-up">Hot Zone Text
  <span><div class="contenueDroite">

  <div class="articlesPromos">
	<div class="ImageDroiteArticlesPromos"><img src="images/product/article1.jpg" /></div><!--ImageDroiteArticlesPromos-->

	<div class="textArticlesPromosDroite"><p>Chandail Bilboquet<br/>HOMME<br/>Grandeurs disponibles:<br/>
M, L, XL et XXL <br/>20 $ tx incluses</p></div><!--/textArticlesPromosDroite-->
    </div><!--articlesPromos-->
    
    

  
    
    

</div><!--/contenueDroite-->
  </span>
</span>
</body>
</html>